<script setup lang="ts">
import UserAvatar from "@/components/user-avatar/index.vue";
import PasswordIcon from "@/components/icons/password-icon.vue";

import type { RoomSummaryModel } from "@/api/model/room.model.ts";

defineProps<{
    room: RoomSummaryModel
}>();
</script>

<template>
    <div class="sys-room-card px-5 py-3 gap-2 flex items-center rounded-xl active:scale-95 transition-transform">
        <!-- 房主头像 -->
        <user-avatar :size="36" class="flex-shrink-0" :qq="room.creator.qq"/>
        <!-- 房间信息 -->
        <div class="flex-grow">
            <!-- 房间标题 -->
            <h2 class="text-lg">{{ room.name }}</h2>
            <!-- 房间其它信息 -->
            <div class="sys-room-card-description text-xs">
                <span class="mr-2">创建者: {{ room.creator.nickname }}({{ room.creator.username }})</span>
                <span>人数: {{ room.userCount }} / {{ room.capacity }}</span>
            </div>
        </div>
        <!-- 是否为锁定房间 -->
        <n-icon v-if="room.locked" :size="20" class="flex-shrink-0">
            <password-icon/>
        </n-icon>
    </div>
</template>

<style lang="scss" scoped>
.sys-room-card {
    color: var(--sys-room-card-text-color);
    background: var(--sys-room-card-background);

    &-description {
        color: var(--sys-room-card-description-text-color);
    }
}
</style>